<!DOCTYPE html>
<html>
<head>
    <title>电影网站</title>
    <style>
        /* 样式 */

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f1f1f1;
        }

        h1, h2 {
            text-align: center;
            margin: 20px 0;
        }

        .movie-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .movie {
            flex-basis: calc(20% - 20px);
            margin-bottom: 20px;
            text-align: center;
        }

        .movie img {
            width: 100%;
            height: auto;
            cursor: pointer;
        }

        .movie h3 {
            margin: 12px 0;
        }

        .movie p {
            font-size: 14px;
            line-height: 1.5;
        }

        .play-button {
            display: inline-block;
            margin-top: 10px;
            padding: 8px 16px;
            border-radius: 4px;
            background-color: #007bff;
            color: #fff;
            text-decoration: none;
            cursor: pointer;
        }

        .play-button:hover {
            background-color: #0069d9;
        }
    </style>
</head>
<body>
<h1>每日推荐</h1>
<div class="movie-container">
    <div class="movie">
        <img src="https://via.placeholder.com/150x225.png?text=Movie+1" alt="电影1">
        <h3>电影1</h3>
        <p>简介1</p>
        <a href="#" class="play-button">播放</a>
    </div>
    <div class="movie">
        <img src="https://via.placeholder.com/150x225.png?text=Movie+2" alt="电影2">
        <h3>电影2</h3>
        <p>简介2</p>
        <a href="#" class="play-button">播放</a>
    </div>
    <div class="movie">
        <img src="https://via.placeholder.com/150x225.png?text=Movie+3" alt="电影3">
        <h3>电影3</h3>
        <p>简介3</p>
        <a href="#" class="play-button">播放</a>
    </div>
    <div class="movie">
        <img src="https://via.placeholder.com/150x225.png?text=Movie+4" alt="电影4">
        <h3>电影4</h3>
        <p>简介4</p>
        <a href="#" class="play-button">播放</a>
    </div>
    <div class="movie">
        <img src="https://via.placeholder.com/150x225.png?text=Movie+5" alt="电影5">
        <h3>电影5</h3>
        <p>简介5</p>
        <a href="#" class="play-button">播放</a>
    </div>
</div>

<script>
    // JavaScript

    // 获取所有电影封面
    const movieImages = document.querySelectorAll('.movie img');

    // 为每个电影封面添加点击事件
    movieImages.forEach(image => {
        image.addEventListener('click', () => {
            playMovie(image);
        });
    });

    // 获取所有播放按钮
    const playButtons = document.querySelectorAll('.play-button');

    // 为每个播放按钮添加点击事件
    playButtons.forEach(button => {
        button.addEventListener('click', () => {
            playMovie(button.previousElementSibling);
        });
    });

    // 播放电影
    function playMovie(target) {
        alert(`正在播放${target.alt}`);
    }
</script>
</body>
</html>
